<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath()}+'/'">
    <meta charset="UTF-8">
    <title>管理员界面</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <style>
        *{margin: 0px;padding: 0px;}
        .bg{
            height: 80px;
            background: #20222a;
            /*border: 1px solid red;*/
        }
        .thead ul{
            line-height: 80px;
            list-style: none;
            float: right;
        }
        .thead ul li{
            display: inline-block;
            width: 80px;
            height: 40px;
            border-radius: 3px;
            line-height: 40px;
            text-align: center;
            background-color: white;
            margin: 10px;

        }
        .thead ul li a{
            text-decoration:none;
        }
        .asid{
            height: 835px;
            background: #20222a;

        }
        .asid span{
            text-align: center;
            font-size: 20px;
            color: white;
            opacity: 0.5;
            display: block;
            margin-top: 0px;
            width: 100%;
            height: 30px;
            background-color: #18191f;
            line-height: 30px;
        }
        .asid span:hover{
            background-color:#009688;
        }
        .asid ul{
            list-style: none;
        }
        .asid ul li{
            text-align: center;
            font-size: 15px;
            color: white;
            opacity: 0.5;
            display: block;
            width: 100%;
            height: 30px;
            background-color:#18191f;
            line-height: 30px;
        }
        .asid ul li:hover{
            background-color:#009688;
        }
        .left{
            margin-right:20px;
        }

    /*    右侧的内容*/
        .modell{
            position: fixed;
            left: 0px;
            top: 0px;
            width: 1920px;
            height: 1680px;
            background: black;
            opacity: 0.5;
            z-index: 50;
        }
        .hiden{
            display: none;
        }
    </style>
<!--    th:inline="javascript"-->
    <script type="text/javascript" th:inline="javascript">
        $(function () {

            $("#userM").click(function(){
                $("#userShow").slideToggle("slow");
            });
            $("#bookM").click(function(){
                $("#bookShow").slideToggle("slow");
            });
            $("#typeM").click(function(){
                $("#typeShow").slideToggle("slow");
            });
            $("#orderM").click(function(){
                $("#orderShow").slideToggle("slow");
            });
            // 展示type添加表单
           $("#addType").click(function () {
                var addTypePage='<form action="type/addType" method="post">\n' +
                    '        <table class="table" style="width: 300px;height: 300px;margin-top: 200px;border: 1px solid;">\n' +
                    '            <tr>\n' +
                    '                <td colspan="2" style="text-align: center;font-size: 20px;font-weight: bold;">添加分类表单</td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td colspan="2"><input type="text" name="type" required placeholder="相同分类不会被添加"></input></td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td colspan="2" style="font-size: 20px;text-align: center;"> <input type="submit" value="提交"></td>\n' +
                    '            </tr>\n' +
                    '        </table>\n' +
                    '    </form>';
               $("#data_show").html(addTypePage);

           });


        })





        //查询所有订单
        function queryAllOrder() {
            $.post("order/queryAllOrder",function (orderList) {
                    var orderPage=' <table class="table table-striped">\n' +
                        '            <tr>\n' +
                        '                <td>对方账号</td>\n' +
                        '                <td>订单编号</td>\n' +
                        '                <td>订单总价</td>\n' +
                        '                <td>订单状态0:未支付1已支付2待发货3已完结4退货退款</td>\n' +
                        '            </tr>';
                for (var i = 0; i <orderList.length ; i++) {
                    orderPage+=' <tr>\n' +
                        '                <td>'+orderList[i].order_userAccount+'</td>\n' +
                        '                <td>'+orderList[i].orderId+'</td>\n' +
                        '                <td>'+orderList[i].orderAllMoney+'</td>\n' +
                        '                <td>'+orderList[i].orderStatus+'</td>\n' +
                        '            </tr>';
                }
                orderPage+=' </table>\n';
                $("#data_show").html(orderPage);
            });
        }
        //查询退货订单
        function queryOrderByNO() {
            $.post("order/queryOrderByNO",function (orderList) {
                var orderPage1=' <table class="table table-striped">\n' +
                    '            <tr>\n' +
                    '                <td>对方账号</td>\n' +
                    '                <td>订单编号</td>\n' +
                    '                <td>订单总价</td>\n' +
                    '                <td>订单状态0:未支付1已支付2待发货3已完结4退货退款</td>\n' +
                    '            </tr>';
                for (var i = 0; i <orderList.length ; i++) {
                    orderPage1+=' <tr>\n' +
                        '                <td>'+orderList[i].order_userAccount+'</td>\n' +
                        '                <td>'+orderList[i].orderId+'</td>\n' +
                        '                <td>'+orderList[i].orderAllMoney+'</td>\n' +
                        '                <td>'+orderList[i].orderStatus+'</td>\n' +
                        '            </tr>';
                }
                orderPage1+=' </table>\n';
                $("#data_show").html(orderPage1);
            });
        }
        //查询所有已发货订单
        function queryAllOrderBySend() {
            $.post("order/queryAllOrderBySend",function (orderList) {
                var orderPage=' <table class="table table-striped">\n' +
                    '            <tr>\n' +
                    '                <td>对方账号</td>\n' +
                    '                <td>订单编号</td>\n' +
                    '                <td>订单总价</td>\n' +
                    '                <td>订单状态0:未支付1已支付2待发货3已完结4退货退款</td>\n' +
                    '            </tr>';
                for (var i = 0; i <orderList.length ; i++) {
                    orderPage+=' <tr>\n' +
                        '                <td>'+orderList[i].order_userAccount+'</td>\n' +
                        '                <td>'+orderList[i].orderId+'</td>\n' +
                        '                <td>'+orderList[i].orderAllMoney+'</td>\n' +
                        '                <td>'+orderList[i].orderStatus+'</td>\n' +
                        '            </tr>';
                }
                orderPage+=' </table>\n';
                $("#data_show").html(orderPage);
            });
        }
        //发货
        function sendOrder() {
            $.post("order/sendOrder",function (orderList) {
                var orderPage=' <table class="table table-striped">\n' +
                    '            <tr>\n' +
                    '                <td>对方账号</td>\n' +
                    '                <td>订单编号</td>\n' +
                    '                <td>订单总价</td>\n' +
                    '                <td>订单状态0:未支付1已支付2待发货3已完结4退货退款</td>\n' +
                    '            </tr>';
                for (var i = 0; i <orderList.length ; i++) {
                    orderPage+=' <tr>\n' +
                        '                <td>'+orderList[i].order_userAccount+'</td>\n' +
                        '                <td>'+orderList[i].orderId+'</td>\n' +
                        '                <td>'+orderList[i].orderAllMoney+'</td>\n' +
                        '                <td>'+orderList[i].orderStatus+'</td>\n' +
                        '            </tr>';
                }
                orderPage+='<tr>\n' +
                    '            <td></td>\n' +
                    '            <td colspan="2"><button onclick="queryAllOrderBySend()">一键发货</button></td>\n' +
                    '            <td></td>\n' +
                    '        </tr>';
                orderPage+=' </table>\n';
                $("#data_show").html(orderPage);
            });

        }
        //查询所有图书
        function queryAllBook() {
            $.post("book/queryAllBook",function (bookList) {
                var mes2=' <table class="table">\n' +
                    '        <tr>\n' +
                    '            <td>编号</td>\n' +
                    '            <td>书名</td>\n' +
                    '            <td>作者</td>\n' +
                    '            <td>价格</td>\n' +
                    '            <td>类型</td>\n' +
                    '            <td>库存</td>\n' +
                    '            <td>操作</td>\n' +
                    '        </tr>';
                for (var i = 0; i <bookList.length ; i++) {
                    mes2+='<tr>\n' +
                        '            <td>'+bookList[i].bookId+'</td>\n' +
                        '            <td>'+bookList[i].bookName+'</td>\n' +
                        '            <td>'+bookList[i].bookWriter+'</td>\n' +
                        '            <td>'+bookList[i].bookPrice+'</td>\n' +
                        '            <td>'+bookList[i].bookType+'</td>\n' +
                        '            <td>'+bookList[i].bookNumber+'</td>\n' +
                        '            <td><button class="btn btn-danger" onclick="updateBook('+bookList[i].bookId+')">修改</button></td>\n' +
                        '        </tr>';
                }
                mes2+=' </table>\n';
                $("#data_show").html(mes2);
            });

        }
        //修改book的属性
        function updateBook(id) {
            $.post("book/queryBookById",{bookId : id},function (book) {
                var mes3='<form action="book/updateBook" method="post">\n' +
                    '        <table class="table table-striped" style="width: 500px;font-size:20px;text-align: center;height: 300px;margin-top: 100px;border: 1px solid;">\n' +
                    '            <tr><input type="hidden" name="bookId" value="'+book.bookId+'"></tr>\n' +
                    '            <tr>\n' +
                    '                <td>书名</td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td><input type="text" name="bookName" value="'+book.bookName+'"></td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td>作者</td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td><input type="text" name="bookWriter" value="'+book.bookWriter+'"></td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td>价格</td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td><input type="text" name="bookPrice" value="'+book.bookPrice+'"></td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td>类型</td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td><input type="text" name="bookType" value="'+book.bookType+'"></td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td>库存</td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td><input type="text" name="bookNumber" value="'+book.bookNumber+'"></td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td><input type="hidden" name="bookDetail" value="'+book.bookDetail+'"></td>\n' +
                    '            </tr>\n' +
                    '            <tr>\n' +
                    '                <td><input type="hidden" name="bookAddress" value="'+book.bookAddress+'"></td>\n' +
                    '            </tr>\n' +
                    '           <tr><td><input type="submit" value="提交"></td></tr>\n' +
                    '        </table>\n' +
                    '    </form>\n';
                $("#data_show").html(mes3);
            });
        }
        //按照图书名查询图书
        function queryBookByName() {
            var mes5='<form action="book/queryBookByName" method="post">\n' +
                '        <table class="table table-striped" style="text-align: center;font-size: 20px;height: 300px;width: 500px;">\n' +
                '            <tr>\n' +
                '                <td colspan="2">按照名字查询表单</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="text" name="bookName" placeholder="书名" required></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="submit" value="提交"> </td>\n' +
                '            </tr>\n' +
                '        </table>\n' +
                '    </form>';
            $("#data_show").html(mes5);
        }
        //添加图书
        function addBook() {
            var mes4='<form action="book/upload" method="post" enctype="multipart/form-data">\n' +
                '        <table class="table table-striped" style="text-align: center;width: 700px;height:600px;margin-top: 10px; ">\n' +
                '            <tr>\n' +
                '                <td colspan="2">添加图书</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2">书名</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="text" name="bookName" placeholder="请输入书名"></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2">图书类别</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="text" name="bookType" placeholder="书的类型"></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2">图书作者</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="text" name="bookWriter" placeholder="作者"></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2">图书价格</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="number" maxlength="5" name="bookPrice" placeholder="价格"></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2">图书库存</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="number" name="bookNumber" placeholder="库存"></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2">图书简介</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="text" name="bookDetail" placeholder="图书详情介绍，吸引顾客"></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2">上传图书图片</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="file" name="file"></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input style="background-color: red;padding:5px;font-size: 20px;" type="submit" value="提交"></td>\n' +
                '            </tr>\n' +
                '        </table>\n' +
                '    </form>';
            $("#data_show").html(mes4);
        }
        //查询所有分类
        function queryAllType() {
            $.post("type/queryAllType",function (typeList) {
                var mes1='\n' +
                    '        <table class="table table-striped">\n' +
                    '            <tr>\n' +
                    '                <td>序号</td>\n' +
                    '                <td>分类别</td>\n' +
                    '                <td>操作</td>\n' +
                    '            </tr>';
                for (let i = 0; i <typeList.length ; i++) {
                    mes1+=' <tr>\n' +
                        '                <td>'+(i+1)+'</td>\n' +
                        '                <td>'+typeList[i]+'</td>\n' +
                        '                <td>' +
                        '<button onclick="deleteType(\''+typeList[i]+'\')">删除</button>' +
                        '<button onclick="updateType(\''+typeList[i]+'\')">修改</button>' +
                        '</td>\n' +
                        '            </tr>';
                }
                mes1+=' </table>\n';
                $("#data_show").html(mes1);
            });
        }
        //修改分类
        function updateType(type) {
            var typePage=' <form action="type/updateType" method="post">\n' +
                '        <table class="table table-striped" style="text-align: center;font-size: 20px;width: 500px;height: 300px;margin-top: 50px;">\n' +
                '            <tr>\n' +
                '                <td colspan="2">修改分类表单</td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '             <td colspan="2"><input type="hidden" name="type1" value="'+type+'"></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input required type="text" name="type2" value="'+type+'"></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td colspan="2"><input type="submit" value="提交"></td>\n' +
                '            </tr>\n' +
                '        </table>\n' +
                '    </form>';
            $("#data_show").html(typePage);
        }
        //删除分类
        function deleteType(type) {
            if(confirm("确定要删除吗")){
                $.post("type/deleteType",{type : type});
                queryAllType();
            }

        }
        //查询所有用户
        function queryAllUser () {

            $.ajaxSettings.async = false;
            $.post("user/queryUser",function (userList) {
                var mes="<table class=\"table table-striped\">\n" +
                    "        <tr>\n" +
                    "            <th>昵称</th>\n" +
                    "            <th>账号</th>\n" +
                    "            <th>密码</th>\n" +
                    "            <th>状态0:未激活1：正常2：禁用</th>\n" +
                    "            <th>收货地址</th>\n" +
                    "            <th>邮箱</th>\n" +
                    "            <th>操作</th>\n" +
                    "        </tr>\n" +
                    "        ";
                // var data1=[[${userList}]];
                console.log(userList);
                // console.log(data1);

                for (var i = 0; i < userList.length; i++) {
                    mes+='<tr>\n' +
                        '                <td>'+userList[i].userName+'</td>\n' +
                        '                <td>'+userList[i].userAccount+'</td>\n' +
                        '                <td>'+userList[i].userPassword+'</td>\n' +
                        '                <td>'+userList[i].userStatus+'</td>\n' +
                        '                <td>'+userList[i].userAddress+'</td>\n' +
                        '                <td>'+userList[i].userMail+'</td>\n' +
                        '                <td><button onclick="toOff('+userList[i].userAccount+')">拉黑</button>\n'+
                        '                <button onclick="toOpen(\''+userList[i].userAccount+'\')">解除</button></td></tr>';

                }
                mes+="</table>";
                $("#data_show").html(mes);
            });
            $.ajaxSettings.async = true;
        }
        //拉黑
       function toOff(userAccount) {

            $.post("user/toOff",{"userAccount" : userAccount});
            queryAllUser ();
       }
        //解除
        function toOpen(userAccount) {

            $.post("user/toOpen",{"userAccount" : userAccount});
            queryAllUser ();
        }

    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 bg">
            <p style=" font-size:30px;color: white;font-family: '宋体';margin-left: 30px;margin-top: 20px; letter-spacing: 5px;">图书商城后端管理</p>
        </div>
        <div class="col-md-4 bg thead">
            <ul>
                <li th:text="'欢迎,'+${manager.managerAccount}">欢迎管理员</li>
                <li><a href="manager/toIndex">返回首页</a></li>
                <li><a href="manager/toLeave" >退出</a></li>
            </ul>
        </div>

    </div>
    <div class="row">
        <div class="col-md-2 asid">
            <div class="row" style="margin-top: 40px;"></div>

            <span id="userM"><p class="glyphicon glyphicon-user left"></p>用户管理</span>
            <ul id="userShow">
                <li id="queryUser" onclick="queryAllUser();" >查询用户</li>
            </ul>
            <span id="typeM"><p class="glyphicon glyphicon-calendar left"></p>分类管理</span>
            <ul id="typeShow">
                <li id="addType">添加分类</li>
                <li onclick="queryAllType();">查看分类</li>
            </ul>
            <span id="bookM"><p class="glyphicon glyphicon-tasks left"></p>图书管理</span>
            <ul id="bookShow">
                <li onclick="queryAllBook();">查看所有图书</li>
                <li onclick="queryBookByName();">按照名字查询</li>
                <li onclick="addBook();">添加图书</li>
            </ul>
            <span id="orderM"><p class="glyphicon glyphicon-duplicate left"></p>订单管理</span>
            <ul id="orderShow">
                <li onclick="queryAllOrder();">查询所有订单</li>
                <li onclick="queryOrderByNO();">按照状态查询</li>
                <li onclick="sendOrder();">安排发货</li>
            </ul>
        </div>
        <div class="col-md-10" style="height: 835px;">
            <div class="modell hiden"></div>
            <div class="row">
                <h2>信息展示</h2><hr>
            </div>
            <div id="data_show" class="row" style="height: 715px;overflow: auto;width: 100%;background-color: white;">
                <h1 th:text="${mes}"></h1>
                <table class="table table-striped">
                    <tr th:each="book : ${queryBook}">
                        <td th:text="${book.bookId}"></td>
                        <td th:text="${book.bookName}"></td>
                        <td th:text="${book.bookPrice}"></td>
                        <td th:text="${book.bookWriter}"></td>
                        <td th:text="${book.bookNumber}"></td>
                        <td th:text="${book.bookType}"></td>
                        <td><button class="btn btn-danger" th:onclick="updateBook([[${book.bookId}]])">修改</button></td>
                    </tr>
                </table>
            </div>
        </div>

    </div>
<!--    内容区-->




<!--    内容区-->
</div>
</body>
</html>

